<template>
  <div class="menus-container">
    <el-card>
      <!-- 按钮 -->
      <el-button type="primary" size="mini" class="Mright" @click="addNewmenus">添加</el-button>
      <!-- 表格数据 -->
      <el-table style="width: 100%" :data="menusData" row-key="id" default-expand-all :tree-props="{ children: 'points', hasChildren: 'hasChildren' }">
        <el-table-column prop="title" label="标题" width="400"> </el-table-column>
        <el-table-column prop="code" label="权限点代码" width="800"> </el-table-column>
        <el-table-column label="操作" width="260">
          <template v-slot="menusData">
            <!-- 修改删除按钮 -->
            <el-button type="primary" size="mini" @click="changeMenus(menusData.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delMenus(menusData.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出层1 -->
      <el-dialog title="创建菜单" :visible.sync="dialogFormVisible">
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <!-- 表单区域 -->
            <el-form :model="menusFormData" label-width="100px" ref="changeMenusForm" :rules="ruleForms">
              <!-- 第一行 -->
              <el-form-item label="权限组名称:">
                <el-radio-group v-model="menusFormData.is_point">
                  <el-radio label="true" :disabled="radioState">菜单</el-radio>
                  <el-radio label="false" :disabled="radioState">权限点</el-radio>
                </el-radio-group>
              </el-form-item>

              <!-- 第二行 -->
              <el-form-item label="权限组名称:" prop="title">
                <el-select v-model="treeData.title" placeholder="请选择活动区域" @change="chooseCustom" ref="multiSelect">
                  <el-option style="height: auto" :value="treeData.pid" :label="treeData.title">
                    <el-tree :data="menusData" :props="defaultProps" default-expand-all node-key="id" @node-click="onNodeClick" :highlight-current="true"> </el-tree>
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- 第三行 -->
              <el-form-item label="权限代码:" prop="code">
                <el-input v-model="menusFormData.code"></el-input>
              </el-form-item>

              <!-- 第四行 -->
              <el-form-item label="权限标题:" prop="title">
                <el-input v-model="menusFormData.title"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!-- 按钮区域 -->
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-button type="primary" @click="onEditChange">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 引入请求菜单数据接口
import { getMenusList, editChange, onAddMenus, delMenus } from '../../api/components/component'
export default {
  data() {
    return {
      // 本行的ID
      index: '',
      // 树形图图状态
      defaultProps: {
        children: 'points',
        label: 'title'
      },
      // 树形图的数据
      treeData: {},
      // 弹出层单选状态，默认true为禁用
      radioState: true,
      // 表格数据
      menusData: [],
      // 弹出框状态
      dialogFormVisible: false,
      // 绑定的表单数据
      menusFormData: {
        // 标题
        title: '',
        // 是否权限点
        is_point: null,
        // 代码
        code: '',
        // pid
        pid: '',
        id: ''
      },
      ruleForms: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        code: [{ required: true, message: '请输入代码片段', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 点击添加弹出框按钮
    onAddChange() {
      console.log(this.menusFormData)
    },
    // 监听选择框的change事件
    chooseCustom() {
      this.$refs.multiSelect.blur()
    },
    // 点击删除按钮
    async delMenus(id) {
      var present = await this.$confirm('确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (present !== 'confirm') return this.$message.info('取消删除成功!')
      this.$message({ type: 'success', message: '删除成功' })
      await delMenus(id)
      this.getMenusData()
    },

    // 点击确定按钮
    async onEditChange() {
      // 根据按钮状态判断
      if (this.radioState) {
        this.menusFormData.title = this.treeData.title
        this.menusFormData.is_point = false
        this.menusFormData.id = this.treeData.id
        this.menusFormData.pid = this.treeData.pid

        try {
          await editChange(this.menusFormData)
          this.$message.success('修改菜单信息成功')
          // 重新渲染数据
          this.getMenusData()
          // 关闭弹出框
          this.dialogFormVisible = false
        } catch (error) {
          return alert(error)
        }
      } else {
        this.menusFormData.pid = this.treeData.pid
        this.menusFormData.is_point = JSON.parse(this.menusFormData.is_point)
        console.log(this.menusFormData)
        try {
          await onAddMenus(this.menusFormData)
          this.$message.success('添加新菜单成功')
          // 重新渲染数据
          this.getMenusData()
          // 关闭弹出框
          this.dialogFormVisible = false
        } catch (error) {}
      }
    },
    // 点击树形选择
    onNodeClick(data) {
      // 将选择框赋值
      this.treeData = data
      // 点击后关闭弹出框
      this.chooseCustom()
    },
    // 点击修改按钮赋值
    changeMenus(row) {
      console.log(row)
      this.radioState = true
      // 弹出弹层
      this.dialogFormVisible = true
      // 把本行的数据绑定到弹出框表单中
      this.menusFormData.title = row.title
      this.menusFormData.code = row.code
    },
    // 点击添加菜单按钮
    addNewmenus() {
      // 打开弹出框
      this.dialogFormVisible = true
      // 重置表单
      this.menusFormData = {}
      // 打开按钮状态
      this.radioState = false
    },
    // label渲染
    renderIcon() {},
    // 获取数据列表
    async getMenusData() {
      const { data } = await getMenusList()
      var data1 = data.map(item => {
        return {
          points: item.childs,
          id: item.id,
          code: item.code,
          title: item.title,
          pid: item.pids
        }
      })
      // 赋值
      this.menusData = data1
    }
  },
  created() {
    this.getMenusData()
  }
}
</script>

<style lang="less" scoped>
/deep/.el-card {
  .el-dialog {
    border-radius: 10px;
    font-weight: 800;
  }
  position: relative;
  .Mright {
    position: absolute;
    right: 100px;
    z-index: 1;
  }
}
</style>
